<script setup>
import teacher_tabbar from '../teacher_tabbar.vue'
import * as echarts from 'echarts'
import uniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import {onMounted} from 'vue'
import img1 from "../../static/image/img/2130@2x.png";

onMounted(() => {
  const div = document.getElementById('test')
  const obj = echarts.init(div)
  let option = {}
  const data = [];
  for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200));
  }
  option = {
    xAxis: {
      max: 'dataMax'
    },
    yAxis: {
      type: 'category',
      data: ['请假类型1', '请假类型2', '请假类型3', '请假类型4', '请假类型5'],
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max: 2 // only the largest 3 bars will be displayed
    },
    series: [
      {
        realtimeSort: true,
        name: '人数',
        type: 'bar',
        data: data,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true
        }
      }
    ],
    legend: {
      show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  };

  function run() {
    for (var i = 0; i < data.length; ++i) {
      if (Math.random() > 0.9) {
        data[i] += Math.round(Math.random() * 2000);
      } else {
        data[i] += Math.round(Math.random() * 200);
      }
    }
    myChart.setOption({
      series: [
        {
          type: 'bar',
          data
        }
      ]
    });
  }

  setTimeout(function () {
    run();
  }, 0);
  setInterval(function () {
    run();
  }, 3000);
  obj.setOption(option)
})


onMounted(() => {
  const div = document.getElementById('test1')
  const obj = echarts.init(div)
  let option1 = {}
  option1 = {
    title: {
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          {value: 1048, name: '离校生'},
          {value: 235, name: '留校生'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  obj.setOption(option1)
})

onMounted(() => {
  const div = document.getElementById('test2')
  const obj = echarts.init(div)
  let option2 = {}
  option2 = {
    title: {
      text: '各学院请假/返校人数'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['学院1', '学院2', '学院3', '学院4', '学院5', '学院6']
    },
    series: [
      {
        name: '请假人数',
        type: 'bar',
        data: [182, 234, 290, 104, 131, 330]
      },
      {
        name: '返校人数',
        type: 'bar',
        data: [193, 234, 310, 121, 134, 381]
      }
    ]
  };
  obj.setOption(option2)
})
</script>

<template>
  <view id="textB">
    <image class="img1" :src="img1"></image>
    <text class="text">
      当前管辖范围学生 1000 人
    </text>
  </view>
  <view id="topText">
    <uni-section class="mb-10" title="留校与离校学生占比" type="line" title-font-size="16px"></uni-section>
  </view>
  <view id="test1"></view>
  <view id="topText">
    <uni-section class="mb-10" title="各学院请假/返校人数" type="line" title-font-size="16px"></uni-section>
  </view>
  <view id="test2"></view>
  <view id="topText">
    <uni-section class="mb-10" title="学生请假类型分布" type="line" title-font-size="16px"></uni-section>
  </view>
  <view id="test"></view>
  <view id="bottom"></view>
  <teacher_tabbar :current-index="1"/>
</template>

<style scoped>

#background1 {
  display: flex;
  justify-content: center;
}

#test {
  width: 100%;
  height: 390px;
  margin-top: -50px;
}

#test1 {
  width: 100%;
  height: 390px;
  margin-top: -10px;
}

#test2 {
  width: 100%;
  height: 390px;
  margin-top: -10px;
}


#bottom {
  height: 100px;
}

#textB {
  width: 100%;
  height: 25px;
  padding: 10px;
  background: linear-gradient(180.00deg, #f2e3ac 0%, #fffae7 100%);
  margin-top: 0px;
}

.text {
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #313133;
  padding: 6px;
}

.img1 {
  width: 15px;
  height: 15px;
  background: transparent;
  margin-top: 4px;
}
</style>